<template>
  <div class="box" style="height: 100vh;">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      style="margin-bottom: 10px"
    />
    <van-empty description="购物车无内容" v-if="show === true">
      <van-button round type="danger" class="bottom-button"
        >立即购物</van-button
      >
    </van-empty>

    <!-- 加入购物车 -->
    <ul v-else>
      <li v-for="item in cartData" :key="item.proid" style="display: flex">
        <van-checkbox
          v-model="item.flag"
          @change="updateOneCart(item.cartid, item.flag)"
        ></van-checkbox>
        <van-swipe-cell style="flex: 1; position: relative">
          <van-card
            class="goods-card"
            :price="item.originprice"
            :desc="item.proname"
            :thumb="item.img1"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
          <van-stepper
            v-model="item.num"
            theme="round"
            button-size="22"
            disable-input
            style="position: absolute; bottom: 10px; right: 10px"
            @plus="updateCartNum(item.cartid, item.num++)"
            @minus="updateCartNum(item.cartid, item.num--)"
          />
        </van-swipe-cell>
      </li>
    </ul>

    <!-- 推荐商品列表 -->
    <p class="needAdd">可能你还想要</p>
    <ul style="display: flex; flex-wrap: wrap; justify-content: space-around">
      <li
        style="width: 48%; margin-bottom: 6px"
        v-for="item in recommendData"
        :key="item"
        @click="goAbout(item.proid)"
      >
        <div>
          <img :src="item.img1" alt="" />
          <p class="p1">{{ item.proname }}</p>
          <p class="p2">￥{{ item.originprice }}</p>
        </div>
      </li>
    </ul>
    <van-submit-bar :price="price" decimal-length="2" button-text="合并" @submit="onSubmit">
      <van-checkbox v-model="checkAll" >全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  recommendList,
  checkCartList,
  updateNum,
  updateOne,
  updateAll,
} from "../service/banner.js";
export default {
  computed:{
    checkAll:{
      get(){
        return this.cartData.every(item=>item.flag)
      },
      set(val){
        this.cartData.forEach((item)=>{
          item.flag = val;
        })
        this.selectAll();
      }
    },
    price(){
      let allPrice = 0;
      this.cartData.forEach((item)=>{
        if(item.flag){
          allPrice += item.originprice*item.num*100;
        }
      })
      return parseInt(allPrice)
    }
  },
  data() {
    return {
      cartData: [],
      recommendData: [],
      flag: true, // 全选
      show: true, // 显示 空状态
    };
  },
  created() {
    this.recommendListData();
    this.checkCartList();
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    checkCartList() {
      checkCartList({ userid: this.$store.state.userInfo.data.userid }).then(
        (res) => {
          console.log(res.data.data);
          if (res.data.code === "200") {
            this.cartData = res.data.data;
            this.show = false;
          }
        }
      );
    },
    updateCartNum(cartid, num) {
      updateNum({
        cartid: cartid,
        num: num,
      }).then((res) => {
        console.log(res.data);
      });
    },
    updateOneCart(cartid, flag) {
      // 更新当前商品选中状态
      updateOne({ cartid: cartid, flag: flag }).then((res) => {
        console.log(res.data);
      });
    },
    selectAll() {
      updateAll({
        userid: this.$store.state.userInfo.data.userid,
        type: this.flag,
      }).then((res) => {
        console.log(res.data);
      });
    },
    recommendListData() {
      recommendList().then((res) => {
        // console.log(res.data);
        if (res.data.code === "200") {
          this.recommendData = res.data.data;
          console.log(this.recommendData);
        }
      });
    },
    goAbout(proid){
      // console.log(proid);
      this.$router.push({path: "/about", query:{id: proid}})
    },
    onSubmit() {
      console.log("点击提交");
    },
  },
};
</script>
<style scoped>
/* .box {
  width: 100vw;
} */
.goods-card {
  /* margin: 0; */
  /* background-color: white; */
}
img {
  width: 100%;
}

.delete-button {
  height: 100%;
}
.needAdd {
  font-size: 14px;
  color: gray;
}
p {
  font-size: 16px;
}
.p1 {
  width: 100%;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.p2 {
  color: red;
  font-weight: bold;
}
</style>
